透過 JS 將文字做出 4 層陰影，並隨著鼠標位置移動

• 文字陰影：text-shadow - CSS
• 元素內容可編輯：contenteditable

觀察 index-Start.html，這題的結構非常的簡單，唯有<h1>標籤上多了一個我們不太熟悉的屬性contenteditable，這是全局屬性，所有標籤掛上它之後都變成可編輯內容，contenteditable 與<input>本質上存在著許多差異，input 能監聽更多的事件種類，也能限定輸入的內容格式，但多以基本的文本輸入為主，而 contenteditable 則適用於需要豐富文本編輯和自訂義外觀的時候，因此我們這邊只是要及時更改文字內容讓陰影跟著變更，並不是要提交資料到某個地方，選用文字標籤並掛上 contenteditable 屬性更為合適。

實作開始

1. 既然要讓陰影跟著滑鼠移動，那必定跟mousemove事件脫不了關係，於是我們直接針對整個網頁視窗新增一個針對mousemove的事件監聽器，當事件觸發後會執行handleH1Shadow函式。

window.addEventListener("mousemove", handleH1Shadow);

2. 接著我們先深入認識 CSStextshadow這個屬性，可以帶入四個參數，分別是X軸偏移量、Y軸偏移量、模糊半徑、 顏色，這幾個屬性都支援 CSS 可用的各種單位廢話

/*text-shadow: X軸偏移量 Y軸偏移量 模糊半徑 顏色 */
text-shadow: 1px 1px 2px black;

你說題目要四層陰影，沒問題你想要幾層都可以multiple_shadows，照著 MDN 的範例我們先寫死四層並設定不同的偏移量及顏色來看看效果吧 👇

h1 {
  text-shadow: 100px 0 0 rgba(150, 255, 110, 1), -100px 0 0 rgba(200, 110, 255, 1),
    0px 100px 0 rgba(255, 255, 110, 1), 0 -100px 0 rgba(110, 255, 225, 1);
}

看起來不錯，接著我們只要將這個 CSS 設定透過 Javascript 變更就能達到題目要求的效果了。

3. handleH1Shadow函式：

• 先取得要新增陰影文本的節點
• 取得節點在視窗內的中心位置(textCenterX,textCenterY)
• 計算滑鼠於視窗位置距離文字中心點的偏移量(X,Y)
• 將四層陰影依據偏移量設定不同的象限(一正一負)

function handleH1Shadow(e) {
  const h1 = document.querySelector("h1");
  const textCenterX = h1.offsetLeft + h1.offsetWidth / 2;
  const textCenterY = h1.offsetTop + h1.offsetHeight / 2;
  const X = e.clientX - textCenterX;
  const Y = e.clientY - textCenterY;
  h1.style.textShadow = `
  ${X}px ${Y / 4}px 0 rgba(150, 255, 110, 1),
  ${-X}px ${Y / 4}px 0 rgba(200, 110, 255, 1),
  ${X / 4}px ${Y}px 0 rgba(255, 255, 110, 1),
  ${X / 4}px ${-Y}px 0 rgba(110, 255, 225, 1)
  `;
}

至此我們完成了題目的需求，但做法與作者的略有不同，作者另有設定陰影偏移上限從-250px~250px(共 500px)，且移動較為規律，有興趣的可以去了解原作的寫法哦！

👉Github Demo 頁面 👈

👉 好想工作室 15th 鐵人賽看板 👈

參考資料

1. Javascript 30 官網
   https://javascript30.com/
2. MDN 官網
   https://developer.mozilla.org/en-US/